<template>
  <div>
    <el-upload
      class="upload-image-panel"
      multiple
      :limit="5"
      :show-file-list="false"
      :action="fileUrl"
      :before-upload="beforeImageUpload"
      :on-exceed="handleExceedImage"
      :on-success="onSuccess"
      :on-error="onError"
      :disabled="detail"
    >
      <template>
        <div v-for="(item,index) in filePath" :key="index" class="preview-image">
          <img :src="staticImgUrl + item.url">
          <div class="image-modal">
            <i class="el-icon-search" @click="handlePreview(filePath)" />
            <i v-if="!detail" class="el-icon-delete" @click="handleRemove(index)" />
          </div>
        </div>
        <i slot="trigger" class="el-icon-plus uploader-icon" />
      </template>
    </el-upload>
    <el-image-viewer
      v-if="imagePreview"
      :append-to-body="true"
      :on-close="()=> imagePreview = false"
      :url-list="showFilePath"
    />
  </div>
</template>

<script>
import { fileUrl, staticImgUrl } from '@/url'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'TableUploadFile',
  components: {
    ElImageViewer
  },
  props: {
    filesList: {
      type: Array,
      default: () => []
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileUrl, staticImgUrl,
      imagePreview: false,
      showFilePath: [],
      filePath: []
    }
  },
  created() {

  },
  methods: {
    init(list) {
      this.filesList = list
      if (this.filesList !== null && this.filesList.length !== 0) {
        this.filePath = this.filesList
      }
    },
    getPaths() {
      return this.filePath
    },
    // 图片
    handlePreview(file) {
      // this.url = staticImgUrl + file.url
      var urlArr = []
      file.forEach(item => {
        urlArr.push(staticImgUrl + item.url)
      })
      this.showFilePath = urlArr
      this.imagePreview = true
    },
    handleRemove(index) {
      this.$confirm('确认删除此图片?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.filePath.splice(index, 1)
      }).catch(() => {
      })
      // this.filePath = []
      // this.showFilePath = []
      // fileList.forEach(value => {
      //   this.filePath.push({
      //     name: value.name,
      //     url: value.url
      //   })
      // })
      // console.log(this.filePath)
    },
    beforeImageUpload(file) {
      var filename = file.name
      var index1 = filename.lastIndexOf('.')
      var index2 = filename.length
      var suffix = filename.substring(index1 + 1, index2)
      if (suffix !== 'png' && suffix !== 'jpg' && suffix !== 'jpeg') {
        this.$message.error('只能上传jpg/png图片格式')
        this.loadingFlag = false
        return false
      }
      const isLt6M = file.size / 1024 / 1024 < 5
      if (!isLt6M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        this.loadingFlag = false
      }
      return isLt6M
    },
    onSuccess(res, file, fileList) {
      if (res.success) {
        this.filePath.push({
          name: file.name,
          url: file.response.data.url
        })
      } else {
        this.$message.error(res.message)
      }
    },
    onError() {
      this.$message.error('图片上传失败')
    },
    handleExceedImage(files, fileList) {
      this.$message.warning(`当前限制选择 5 张图片，本次选择了 ${files.length} 个图片，共选择了 ${files.length + fileList.length} 个图片`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
